import React from 'react';
import { Button } from 'antd';
import { Row, Col } from 'antd';
import { PaymentOption } from '../services/payment';
import { getAssetPath } from '@/utils/assetPath';
import styles from './PaymentSection.module.css';

interface PaymentSectionProps {
  paymentOptions: PaymentOption[];
  selectedOptionIndex: number | null;
  setSelectedOptionIndex: (index: number) => void;
}

const PaymentSection: React.FC<PaymentSectionProps> = ({ paymentOptions, selectedOptionIndex, setSelectedOptionIndex }) => {
  return (
    <Row gutter={[12, 3]} className={styles.container}>
      {paymentOptions.map((option, index) => (
        <Col
          xs={8}
          sm={8}
          key={option.rule_id}
          className={styles.col}
        >
          <div
            className={
              selectedOptionIndex === index
                ? `${styles.option} ${styles.optionSelected}`
                : styles.option
            }
            onClick={() => setSelectedOptionIndex(index)}
          >
            <Button
              type="text"
              block
              className={styles.payBtn}
            >
              <img src={getAssetPath('/pay/diamond.png')} alt="Diamond" className={styles.diamondImg} />
              <span className={styles.diamondDesc}>{option.diamond_desc}</span>
              <span className={styles.price}>¥{option.price}</span>
            </Button>
          </div>
        </Col>
      ))}
    </Row>
  );
};

export default PaymentSection;
